<template>
	<view id="engineer">
		<view class="eng-item">
			<!-- <view class="engineer-tit">全部工程<u-icon name="arrow-down-fill"></u-icon></view> -->
			<view class="engineer-detail">
				<u-row customStyle="margin-bottom: 10px">
						<u-col span="3">
							<image class="eng-img" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/static/images/1.jpg"></image>
						</u-col>
						<u-col span="9">
							<view class="eng-tit">工程统计</view>
							<view class="eng-det">
								<view class="item-det">
									<text class="item-text">项目总数</text>
									<text class="item-num" @click="showIndexList">{{ proTotal[0].num }}</text>
									<image class="det-img" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/rili.png"></image>
								</view>
								<view class="item-det">
									<text class="item-text">当年新增</text>
									<text class="item-num">0</text>
									<image class="det-img" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/up_icon.png"></image>
								</view>
							</view>
						</u-col>
				</u-row>
			</view>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="eng-item" v-show="isPop">
			<u-cell-group :border="false">
				<u-cell title="项目分类"></u-cell>
				<view class="circle-bar">
					<!-- 微信小程序会出问题，真机预览不会 :canvas2d="true"为true时真机不会出问题，为false时小程序本地预览不会出问题 -->
					<!-- <qiun-data-charts type="ring" :canvas2d="true" :canvasId="canvasId_data" :opts="opts" :chartData="chartData" /> -->
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
			</u-cell-group>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="eng-item">
			<u-cell-group :border="false">
				<u-cell title="智慧监测"></u-cell>
				<view class="gk">
					<u-grid col="4" @click="onGridEnv">
						<u-grid-item>
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zszd.png"></image>
							</view>
							<text class="grid-text">扬尘管控</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/warn_zs.png"></image>
							</view>
							<text class="grid-text">噪声管控</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/soil_icon.png"></image>
							</view>
							<text class="grid-text">裸土覆盖</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/wash_icon.png"></image>
							</view>
							<text class="grid-text">车辆冲洗</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/sp2.png"></image>
							</view>
							<text class="grid-text">视频管控</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/ycgk.png"></image>
							</view>
							<text class="grid-text">喷淋联动</text>
						</u-grid-item>
						<u-grid-item>
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/gjxx.png"></image>
							</view>
							<text class="grid-text">告警管控</text>
						</u-grid-item>
					</u-grid>
				</view>
			</u-cell-group>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="eng-item">
			<u-cell-group :border="false">
				<u-cell title="移动办公"></u-cell>
				<view class="gk">
					<u-grid col="4">
						<u-grid-item @click="onGridEnvOfficeOne">
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zxjc.png"></image>
							</view>
							<text class="grid-text">上级交办</text>
						</u-grid-item>
						<u-grid-item @click="onGridEnvOfficeTwo">
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/spgk.png"></image>
							</view>
							<text class="grid-text">项目自查</text>
						</u-grid-item>
						<u-grid-item @click="onGridEnvOfficeThree">
							<view class="item-image">
								<image class="img-css" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zxjc.png"></image>
							</view>
							<text class="grid-text">问题整改</text>
						</u-grid-item>
					</u-grid>
				</view>
			</u-cell-group>
		</view>
	</view>	
</template>

<script>
	import {
		getChildren,
		getProjectIndex
	} from '@/api/global'
	import {
		getProjectViews,
		getProjectType
	} from '@/api/engineering'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	
	export default {
		data() {
			return {
				isPop: true,
				indexShow: false,
				indexShow2: false,
				chartShow: false,
				chartDataList: [],
				// 环形图
				chartData: {
					series: [{
						data: []
					}]
				},
				canvasId_data: 'canvasiddataucharts',
				opts: {
					update: true,
					rotate: false,
					rotateLock: false,
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [5,5,5,5],
					dataLabel: true,
					legend: {
					  show: true,
					  position: "bottom",
					  lineHeight: 5
					},
					title: {
					  name: "项目数",
					  fontSize: 15,
					  color: "#666666"
					},
					subtitle: {
					  name: "",
					  fontSize: 25,
					  color: "#7cb5ec"
					},
					extra: {
					  ring: {
							ringWidth: 15,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 20,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
					  }
					}
				},
				areaId: uni.getStorageSync(AREA_ID),
				proTotal: [
					{ num: null }
				],
				queryParam: {
					businessCount: '2'
				},
				projectData: [],
				// 全部项目
				projectList: [],
				// params: {}
				totalData: [],
				raiseOrNoise: 'raise'
			}
		},		
		mounted() {
			this.getProject()
			this.getProjectList()
		},
		methods: {
			getProjectList () {
				getProjectIndex().then(res => {
					const data = res.data.data
					let projectList = []
					for(const k in data) {
						projectList = projectList.concat(data[k])
					}
					this.projectList = projectList
					// this.isPop = false
				})
			},
			// 智慧监测
			onGridEnv (name) {
				if (name === 0) {
					this.raiseOrNoise = 'raise'
					uni.navigateTo({
						url: '/packageB/selector/selector?from=' + 'engineering' + '&to=dust'
					})
				}
				if (name === 1) {
					this.raiseOrNoise = 'noise'
					uni.navigateTo({
						url: '/packageB/selector/selector?from=' + 'engineering' + '&to=noise'
					})
				}
				if (name === 2) {
					uni.navigateTo({
						url: '/packageE/soil/soil'
					})
				}
				if (name === 3) {
					uni.navigateTo({
						url: '/packageB/wash/wash'
					})
				}
				if (name === 4) {
					uni.navigateTo({
						url: '/packageB/video/video'
					})
				}
				if (name === 6) {
					uni.navigateTo({
						url: '/packageE/warn/warn'
					})
				}
			},
			onGridEnvOfficeOne () {
				uni.navigateTo({
					url: '/packageE/assigned-by-superior/assigned-by-superior'
				})
			},
			onGridEnvOfficeTwo () {
				uni.navigateTo({
					url: '/packageE/project-self-inspection/project-self-inspection'
				})
			},
			onGridEnvOfficeThree () {
				uni.navigateTo({
					url: '/packageE/problem-rectification/problem-rectification'
				})
			},
			// 工程信息
			getProject () {
				uni.showLoading({
					title: '加载中'
				})
				const app = this
				const areaIds = []
				let query = ''
				getChildren(app.areaId).then(areas => {
					const ids = areas.data.data
					for (const k in ids) {
						areaIds.push(ids[k].id)
					}
					this.areaIds = areaIds.join(',')
					getProjectViews(this.areaIds).then(res => {
						this.proTotal = res.data.data
						this.opts.subtitle.name = this.proTotal[0].num
					})
					for (const k in app.queryParam) {
						query += `&${k}=${app.queryParam[k]}`
					}
					getProjectType(this.areaIds, query).then(res => {
						this.chartDataList = res.data.data
						const data = []
						for (const k in this.chartDataList) {
							// const percentage = Number(Number((this.chartDataList[k].num / this.opts.subtitle.name) * 100).toFixed(0)) // 计算百分比
							const percentage = ((this.chartDataList[k].num / this.opts.subtitle.name) * 100).toFixed(0) // 计算百分比
							data.push({
								name: this.chartDataList[k].projectTypeLabel,
								value: this.chartDataList[k].num,
								labelText: this.chartDataList[k].num + '个 '+ percentage + '%'
							})
						}
						this.chartData.series[0].data = data
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			// 点击显示所有项目
			showIndexList () {
				uni.navigateTo({
					url: '/packageB/selector/selector?from=' + 'engineering' + '&to=projectdetail'
				})
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.getProject()
				uni.stopPullDownRefresh()
			},
		}
	}
</script>

<style lang="scss">
	#engineer{
		height: 100vh;
		background-color: #ffffff;
		.circle-bar {
			width: 100%;
			height: 400upx;
			padding: 1% 0;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.u-grid {
			margin-bottom: 40upx;
			.u-grid-item {
				padding-top: 40upx;
			}
		}
		.u-cell__title-text {
		  font-weight: bold;
		}
		.engineer-detail {
			padding: 20upx 20upx 0;
			position: relative;
			z-index: 999
		}
		.engineer-tit {
			position: relative;
			text-align: center;
			font-weight: bold;
			font-size: 32upx;
			margin-top: 10upx;
			.u-icon__icon {
				position: absolute;
				left: 50%;
				top: 7upx !important;
				margin-left: 74upx;
			}
		}
		.eng-img {
			width: 160upx;
			height: 160upx;
		}
		.eng-det {
			display: flex;
			flex-direction:row;
			.item-det {
				display: flex;
				flex-direction:row;
				line-height: 32upx;
				margin-top: 20upx;
				margin-right: 50upx;
				.item-num {
					font-size: 32upx;
					color: #007aff;
					padding: 0 6upx;
				}
				.det-img {
					width: 32upx;
					height: 32upx;
				}
			}
		}
		.grid-text {
			margin-top: 10upx;
		}
		.img-css {
			width: 80upx;
			height: 80upx;
		}
	}
</style>